<template>
  <div class="disabled-warp" style="height: calc(100vh - 104px); padding: 20px;">
    <div class="dashboard-container" style=" padding: 20px 25px 10px; ">
      <div
          style="  line-height: 16px; flex-wrap: wrap;   align-items: center;
          font-size: 16px; font-family: Source Han Sans CN;font-weight: bold;color: #2F3745; ">
        <div class="dashboard-inner">
          结算账户
          <el-tooltip class="item" effect="dark" content="温馨提示：表格对应列可以通过拖动改变表格宽度" placement="top">
            <i style="position: relative; left: 6px; top: 2px;" class="header-icon el-icon-info"></i>
          </el-tooltip>
        </div>
      </div>
    </div>

    <div style="  height: calc(100% - 30px); background: #fff;" class="settement-right-content " >
      <div style="width: calc(100% - 50px); margin-left: 25px; margin-right: 25px;">
        <common-operation-form  :list="list"/>

        <el-table style="margin-top: 15px;" @select="changeevent" :height="windowHeight - 10"
                  v-loading="table.loading" :data="table.data" border >
          <el-table-column
              v-for="(item, index) in table.header1"
              :prop="item.prop"
              :index="index" :align="`center`"
              :width="item.width || 'auto'" :header-align="`center`"
              :label="item.label">
            <template slot-scope="scope">
              <span v-if="item.prop === 'defaultSettlementAccount'" style=" ">
                {{ scope.row[item.prop] ? '是' : '否' }}
              </span>
              <span v-else style=" ">{{ scope.row[item.prop] }}</span>
            </template>
          </el-table-column>

          <el-table-column
              label="操作" width="120" fixed="right">
            <template slot-scope="scope">
              <template slot-scope="scope">
                <div style="display: flex;">
                  <el-tooltip content="编辑" slot="reference" placement="top">
                    <el-button size="mini" type="primary" icon="el-icon-edit" circle @click="edit(scope.row)"></el-button>
                  </el-tooltip>
                  <el-tooltip content="删除" slot="reference" placement="top">
                    <el-button size="mini" @click="del(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
                  </el-tooltip>
                </div>
              </template>

              <div style="display: flex;">
                <el-tooltip content="编辑" slot="reference" placement="top">
                  <el-button size="mini" type="primary" icon="el-icon-edit" circle @click="edit(scope.row)"></el-button>
                </el-tooltip>
                <el-tooltip content="删除" slot="reference" placement="top">
                  <el-button size="mini" @click="del(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination style="position: relative; text-align: right; margin-top: 10px;"
                       :current-page="page.pageNumber"
                       layout="sizes, jumper, prev, pager, next" :page-size="page.pageSize"
                       :total="page.total">
        </el-pagination>
      </div>
    </div>

    <div style="  height: calc(100% - 30px); background: #fff;" class="settement-right-content " >
      <div style="width: calc(100% - 50px); margin-left: 25px; margin-right: 25px;">
        <common-operation-form  :list="list"/>

        <el-table style="margin-top: 15px;" @select="changeevent" :height="windowHeight - 10"
                  v-loading="table.loading" :data="table.data" border >
          <el-table-column
              v-for="(item, index) in table.header1"
              :prop="item.prop"
              :index="index" :align="`center`"
              :width="item.width || 'auto'" :header-align="`center`"
              :label="item.label">
            <template slot-scope="scope">
              <span v-if="item.prop === 'defaultSettlementAccount'" style=" ">
                {{ scope.row[item.prop] ? '是' : '否' }}
              </span>
              <span v-else style=" ">{{ scope.row[item.prop] }}</span>
            </template>
          </el-table-column>

          <el-table-column
              label="操作" width="120" fixed="right">
            <template slot-scope="scope">
              <template slot-scope="scope">
                <div style="display: flex;">
                  <el-tooltip content="编辑" slot="reference" placement="top">
                    <el-button size="mini" type="primary" icon="el-icon-edit" circle @click="edit(scope.row)"></el-button>
                  </el-tooltip>
                  <el-tooltip content="删除" slot="reference" placement="top">
                    <el-button size="mini" @click="del(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
                  </el-tooltip>
                </div>
              </template>

              <div style="display: flex;">
                <el-tooltip content="编辑" slot="reference" placement="top">
                  <el-button size="mini" type="primary" icon="el-icon-edit" circle @click="edit(scope.row)"></el-button>
                </el-tooltip>
                <el-tooltip content="删除" slot="reference" placement="top">
                  <el-button size="mini" @click="del(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>


        <el-pagination style="position: relative; text-align: right; margin-top: 10px;"
                       :current-page="page.pageNumber"
                       layout="sizes, jumper, prev, pager, next" :page-size="page.pageSize"
                       :total="page.total">
        </el-pagination>
      </div>
    </div>

    <el-dialog style="margin-top: 10px;"
               :close-on-click-modal="false"
               title="编辑" :modal="false"
               width="450px" v-dialog-drag
               custom-class="dialoginter103"
               :visible.sync="editDialog">
      <div>
        <common-dialog-form v-if="editDialog" ref="commondialogformref" :col="dialog.col" :list="dialog.form"/>
      </div>

      <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="cancel">关闭</el-button>
          <el-button type="primary" size="small" @click="submit">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import CommonOperationForm from "@/components/CommonOperationForm/index.vue";
import CommonDialogForm from "@/components/CommonDialogForm/index.vue";
import {getUserInfo} from "@/utils/auth";
import {getSettlementAccountList, addSettlementAccount, deleteSettlementAccountBySettlementAccountID} from "@/api/settlementAccount";
import {deepClone} from "@/utils";

export default {
  name: 'settlement_account',
  components: {CommonOperationForm, CommonDialogForm},
  data() {
    return {
      list: [
        {
          type: 'input',
          text: '账户名称：',
          width: '75px',
          value: '',
        },
        {
          type: 'input',
          text: '账户编号：',
          width: '75px',
          value: '',
        },
        {
          type: 'button',
          buttonIcon: 'el-icon-search',
          buttonText: '搜索',
          event: () => {
            this.pageNumber = 1;
            this.getSettlementAccountList();
          }
        },
        {
          type: 'button',
          buttonIcon: 'el-icon-folder-add',
          buttonText: '增加',
          event: () => {
            this.editDialog = true;
            this.dialog.chooseItem = null;
          }
        },
        {
          type: 'button',
          buttonIcon: 'el-icon-printer',
          buttonText: '打印',
          event: () => {

          }
        },
        {
          type: 'button',
          buttonIcon: 'el-icon-document-add',
          buttonText: '导入',
          event: () => {

          }
        },
        {
          type: 'button',
          buttonIcon: 'el-icon-takeaway-box',
          buttonText: '导出',
          event: () => {

          }
        },
      ],
      editDialog: false,
      table: {
        data: [],
        loading: false,
        header1: [
          {"label": "账户名称", "prop": "accountName"},
          {"label": "账户编号", "prop": "accountNumber"},
          {"label": "期初余额", "prop": "initialBalance"},
          {"label": "资金余额", "prop": "fundBalance"},
          {"label": "默认", "prop": "defaultSettlementAccount"},
          {"label": "备注", "prop": "remarks"}
        ],
      },
      page: {
        pageSize: 10,
        pageNumber: 1,
        total: 0,
      },
      dialog: {
        col: 1,
        form: [
          [
            {
              text: '账户名称：',
              required: true,
              field: 'accountName',
              width: '90px',
              requiredMessage: "请输入账户名称",
              type: 'input',
              value: null,
            },
          ],
          [
            {
              text: '账户编号：',
              type: 'input',
              width: '90px',
              field: 'accountNumber',
              value: '',
            },
          ],
          [
            {
              text: '期初余额：',
              type: 'input',
              width: '90px',
              field: 'initialBalance',
              value: '',
            },
          ],
          [
            {
              text: '填写备注：',
              value: '',
              width: '90px',
              rowWidth: '100%',
              field: 'remarks',
              type: 'textarea',
            },
          ],
          [
            {
              text: '默认',
              value: '',
              width: '90px',
              rowWidth: '100%',
              field: 'defaultSettlementAccount',
              type: 'checkbox',
            },
          ],
        ],
        copyForm: [
          [
            {
              text: '账户名称：',
              required: true,
              field: 'accountName',
              width: '90px',
              requiredMessage: "请输入账户名称",
              type: 'input',
              value: null,
            },
          ],
          [
            {
              text: '账户编号：',
              type: 'input',
              width: '90px',
              field: 'accountNumber',
              value: '',
            },
          ],
          [
            {
              text: '期初余额：',
              type: 'input',
              width: '90px',
              field: 'initialBalance',
              value: '',
            },
          ],
          [
            {
              text: '填写备注：',
              value: '',
              width: '90px',
              rowWidth: '100%',
              field: 'remarks',
              type: 'textarea',
            },
          ],
          [
            {
              text: '默认',
              value: '',
              width: '90px',
              rowWidth: '100%',
              field: 'defaultSettlementAccount',
              type: 'checkbox',
            },
          ],
        ],
        chooseItem: null,
      },
    }
  },
  mounted() {
    this.getSettlementAccountList();
  },
  methods: {
    getSettlementAccountList() {
      if (this.table.loading)
        return;
      this.table.loading = true;
      getSettlementAccountList({
        userID: getUserInfo().userID,
        pageSize: this.page.pageSize,
        pageNumber: this.page.pageNumber,
        settlementAccountName: this.list[0].value,
        accountNumber: this.list[1].value,
      }).then(res => {
        console.log(res);
        this.table.data = res.data.data;
        this.page.total = res.data.page.totalDocuments;
        this.table.loading = false;
      });
    },
    changeevent(selection, row) {
      console.log(selection, row);
    },
    edit(item) {
      let setData = () => {
        for (const inputSet of this.dialog.form) {
          for (const inputItem of inputSet) {
            inputItem['value'] = item[inputItem['field']];
          }
        }
      }

      setData();
      this.dialog.chooseItem = item;
      this.editDialog = true;
    },
    del(item) {
      this.$confirm('您确认要删除该仓库吗?', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).then(() => {
        deleteSettlementAccountBySettlementAccountID({
          _id: item._id
        }).then(res => {
          this.$message.success("操作成功");
          this.getSettlementAccountList();
        });
      }).catch(() => {

      });
    },
    cancel() {
      this.editDialog = false;
      this.dialog.form = JSON.parse(JSON.stringify(this.dialog.copyForm));
    },
    submit() {
      let data = this.$refs.commondialogformref.requiredEmpty();
      if (data) {
        this.$message.error(data.requiredMessage);
        return;
      }

      data = this.$refs.commondialogformref.getData();
      data['isDisabled'] = false;
      data["userID"] = getUserInfo().userID;
      if (this.dialog.chooseItem) {
        data['_id'] = this.dialog.chooseItem['_id'];
      }
      addSettlementAccount(data).then(res => {
        console.log(res);
        if (res.data.code === -1) {
          this.$message.error(res.data.errMsg);
          return;
        }
        this.dialog.form = deepClone(this.dialog.copyForm);
        this.editDialog = false;
        this.getSettlementAccountList();
        this.$message.success("操作成功");
      });
    }
  }
}
</script>


<style lang="scss" scoped>
.dashboard {
  &-container {
    background: #fff;
    box-shadow: 0px 0px 10px 0px rgba(45, 51, 65, 0.08);
    border-radius: 10px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}


.dashboard-inner {
  font-size: 16px;
  font-weight: 700;
  padding: 0 0 10px 0;
  color: #2f3745;
}

.settement-right-content {
  line-height: 16px;
  flex-wrap: wrap;
  width: 100%;
  border-radius: 10px;
  padding-top: 10px;
  margin-top: 10px;
  align-items: center;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
}
</style>
